<template>
  <div class="page" v-if="view">
    <div class="clicntShowWrap">
      <div class="clicntShow">
        <div class="topBox">
           <img :src="'https://www.japitta.com/booking/files/'+view.wMerchantDo.shopImg1" class="infoImg">
          <div class="info">
            <div class="name">{{view.wMerchantDo.shopName}}</div>
            <p class="address">{{view.wMerchantDo.address}}</p>
            <p class="tel">{{view.wMerchantDo.merchantPhone}}</p>
            <p class="time">{{view.wMerchantDo.operatedBegin1}}-{{view.wMerchantDo.operatedEnd1}} {{view.wMerchantDo.operatedBegin2}}-{{view.wMerchantDo.operatedEnd2}}<br>{{view.wMerchantDo.openDailyJ}}</p>
          </div>
        </div>
        <div class="cinfo">
          <ul>
            <li>
              <span>名前</span>
              <p>{{view.name}}</p>
            </li>
            <li>
              <span>電話</span>
              <p>{{view.phone}}</p>
            </li>
						<li>
						  <span>備考</span>
						  <p>{{view.note}}</p>
						</li>
          </ul>
        </div>
        <div class="conditions" v-if="view.wdIscountDtoOut!=null">
          <div class="box">
            <span>特典</span>
            <div class="box_n">
              <div class="box_n1">
                <div class="lbox">
                  <div class="n">期限：{{view.wdIscountDtoOut.limitedJ}}</div>
                  <p>条件1：{{view.wdIscountDtoOut.conditionJ1}}</p>
                  <p>条件2：{{view.wdIscountDtoOut.conditionJ}}</p>
                </div>
                <div class="rbox">
                  <p>内容：</p>
                  <p>{{view.wdIscountDtoOut.contentJ}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <van-cell-group style="margin-top:15px">
        <van-cell :title="view.orderNum+'人'" is-link @click="numShowF" />
        <van-cell :title="view.orderDate" is-link @click="dateShowF" />
        <van-cell :title="view.orderTime" is-link @click="timeShowF" />
      </van-cell-group>
    </div>
    <van-goods-action style="border-top:solid 1px #eee">
      <van-goods-action-big-btn text="確認する" @click="nextPost('确定变更')" class="btnPostBg3" />
    </van-goods-action>
    <!-- 时间 -->
    <van-actionsheet v-model="timeShow">
      <van-datetime-picker v-model="view.orderTime" title="选择时间" type="time" @confirm="timeValF" @cancel="timeHideF" />
    </van-actionsheet>
    <!-- 选人-->
    <van-actionsheet v-model="numShow">
      <van-picker :columns="numVal" title="选择就餐人数" show-toolbar @confirm="numValF" @cancel="numHideF" />
    </van-actionsheet>
    <!-- 选日期-->
    <van-actionsheet v-model="dateShow">
      <van-datetime-picker v-model="currentDate" title="选择日期" type="date" :min-date="minDate" @confirm="dateValF" @cancel="dateHideF" />
    </van-actionsheet>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from 'vant';
export default {
  data() {
    return {
      id: "",
      state: "",
      timeShow: false,
      numShow: false,
      dateShow: false,
      currentDate: new Date(),
      minDate: new Date(),
      numVal: [
        { text: "1人", val: 1 },
        { text: "2人", val: 2 },
        { text: "3人", val: 3 },
        { text: "4人", val: 4 },
        { text: "5人", val: 5 },
        { text: "6人", val: 6 },
        { text: "7人", val: 7 },
        { text: "8人", val: 8 },
        { text: "9人", val: 9 },
        { text: "10人", val: 10 },
        { text: "10人以上", val: 11 }
      ],
      view:null  
    };
  },
  mounted: function() {
    Toast.loading({
      mask: true,
      message: '加载中...'
    });
    this.id = this.$route.query.id;
    this.getData();
  },
  methods: {
    nextPost(text) {
      Dialog.confirm({
        title: "消息",
        message: text,
        confirmButtonText: "確認する",
        cancelButtonText: "キャンセル"
      }).then(() => {
        this.postData();
      });
    },
    getData() {
      this.$http
        .get(this.httpUrl + "/merchant/orders/merchantOrderDetail.do", {
          params: { orderId: this.id }
        })
        .then(response => {
            this.view = response.data.data;
            this.view.orderDate=this.formatDateTime(this.view.orderDate)
            this.view.orderTime=this.formatDateTime(this.view.orderTime,"time")
            this.view.wMerchantDo.operatedBegin1=this.formatDateTime(this.view.wMerchantDo.operatedBegin1,"time")
            this.view.wMerchantDo.operatedBegin2=this.formatDateTime(this.view.wMerchantDo.operatedBegin2,"time")
            this.view.wMerchantDo.operatedEnd1=this.formatDateTime(this.view.wMerchantDo.operatedEnd1,"time")
            this.view.wMerchantDo.operatedEnd2=this.formatDateTime(this.view.wMerchantDo.operatedEnd2,"time")
            Toast.clear();
        })
    },
    postData() {
      this.$http
        .post(
          this.httpUrl + "/merchant/orders/merchantChangeOrder.do",
          {
            orderId: this.id,
            orderNum: this.view.orderNum,
            orderDate: this.view.orderDate,
            orderTime: this.view.orderDate+" "+this.view.orderTime+":00"
          }
        )
        .then(response => {
          this.$router.push("/orders/success?id=" + this.id);
        })
    },
    // 时间
    timeShowF() {
      this.timeShow = true;
    },
    timeHideF() {
      this.timeShow = false;
    },
    timeValF(val) {
      this.view.orderTime = val;
      this.timeShow = false;
    },
    // 人数
    numShowF() {
      this.numShow = true;
    },
    numHideF() {
      this.numShow = false;
    },
    numValF(value, index) {
      this.view.orderNum = this.numVal[index].val;
      this.numShow = false;
    },
    // 日期
    dateShowF() {
      this.dateShow = true;
    },
    dateHideF() {
      this.dateShow = false;
    },
    dateValF(value) {
      this.view.orderDate=this.formatDateTime(value)
      this.dateShow = false;
    },
    formatDateTime(obj,v) {
      var date =  new Date(obj);
      var y = 1900+date.getYear();
      var m = "0"+(date.getMonth()+1);
      var d = "0"+date.getDate();
      var minute = date.getMinutes();  
      var hours = date.getHours();  
      minute = minute < 10 ? ('0' + minute) : minute;    
      hours = hours < 10 ? ('0' + hours) : hours;
      if(v=="time"){
      return hours+':'+minute;   
      }else{
      return y+"-"+m.substring(m.length-2,m.length)+"-"+d.substring(d.length-2,d.length);
      }
    }
  }
};
</script>
